<template>
  <div class="matter_status">
    <van-nav-bar
      :title="matterStatus"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        class="dynamic-list-style"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul>
          <li
            v-for="(o, index) in contentList"
            :key="index"
            class="record_list"
          >
            <div>
              <span class="record_title">{{ o.serviceName }}</span>
              <p class="record_time">审批日期：{{ o.approveDate?o.approveDate:'暂未审批' }}</p>
            </div>
            <div class="operate_btn" v-show="toAccept">
              <van-button @click="handleEdit(o)" type="danger" size="mini"
                >修改</van-button
              >
              <van-button @click="handleDelete(o)" type="danger" size="mini"
                >撤销</van-button
              >
            </div>
            <div class="operate_btn" v-show="toApprove">
              <van-button @click="handleDelete(o)" type="danger" size="mini"
                >撤销</van-button
              >
            </div>
            <div class="operate_btn" v-show="toCorrection">
              <van-button @click="handleChange(o)" type="danger" size="mini"
                >补正</van-button
              >
            </div>
            <div class="operate_btn" v-show="canView">
              <van-button @click="viewDetail(o)" type="danger" size="mini"
                >查看</van-button
              >
            </div>
            <div v-show="toPendingTrial" class="operate_btn pending_trail">
              请于{{o.endDate}}之前去柜台办理
            </div>
            <div class="operate_btn" v-show="complete">
              <van-button @click="expressSearch(o)" type="danger" size="mini"
                >快递查询</van-button
              >
            </div>
          </li>
        </ul>
      </van-list></van-pull-refresh
    >
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/govService.js";
import constant from "@/controller/constant.js";
import { Dialog } from "vant";
export default {
  data() {
    return {
      canView: true,
      loading: false,
      finished: false,
      isLoading: false,
      showLoading: false,
      matterStatus: "",
      toAccept: false,
      toApprove: false,
      toCorrection: false,
      toPendingTrial: false,
      complete: false,
      contentList: [],
      curPage: 1,
      pageSize: 10,
      data: {}
    };
  },
  mounted() {
    this.matterStatus = this.$route.query.serviceName;
    switch (this.matterStatus) {
      case "待受理":
        this.toAccept = true;
        this.data = {
          status: 1
        };
        this.canView = false
        break;
      case "待审批":
        this.data = {
          approveStatus: 1
        };
        break;
      case "待补正":
        this.toCorrection = true;
        this.data = {
          approveStatus: 4
        };
        break;
      case "待审原件":
        this.toPendingTrial = true;
        this.canView = false
        this.data = {
          approveStatus: 2,
          isSite: 1
        };
        break;
      case "已办结":
        this.complete = true;
        this.data = {
          status: 4
        };
        break;
      default:
        break;
    }
    // this.getList();
  },
  methods: {
    onRefresh() {
      this.contentList = [];
      setTimeout(() => {
        this.curPage = 1;
        this.pageSize = 10;
        this.getList();
        this.isLoading = false;
      }, 500);
    },
    onLoad() {
      this.getList();
    },
    getList() {
      this.showLoading = true;
      api
        .service_apply_v1_find_own_page(this.pageSize, this.curPage, this.data)
        .then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            this.contentList = [...this.contentList, ...res.datas.records];
            this.curPage = this.curPage + 1;
            if (res.datas.records.length < this.pageSize) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        })
        .catch(() => {})
        .then(() => {
          this.showLoading = false;
        });
    },
    viewDetail(val) {
      this.$router.push({
        name: 'detailPage',
        query: val
      })
    },
    handleEdit(val) {
      this.$router.push({ name: "editPage", query: val });
    },
    handleDelete(val) {
      Dialog.confirm({
        title: "提示",
        message: `确认撤销此条信息？`
      })
        .then(() => {
          api.service_apply_v1_revoke(val.id).then(res => {
            if (res.code === "0") {
              this.$toast("撤销成功");
              this.contentList = [];
              this.curPage = 1;
              this.pageSize = 10;
              this.getList();
            } else {
              if (res && res.msg) {
                this.$toast(res.msg);
              } else {
                this.$toast(constant.unusualMsg);
              }
            }
          });
        })
        .catch(() => {});
    },
    handleChange(val) {
      this.$router.push({ name: "editPage", query: val });
    },
    expressSearch(val) {
      this.$router.push({ name: "myExpress", query: val });
    }
  }
};
</script>

<style lang="scss" scoped>
.matter_status {
  background: #ffffff;
  height: 100%;

  .record_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    border-bottom: 1px solid rgba(226, 226, 226, 0.5);
  }

  .record_title {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    padding: 15px 0;
    width: 230px;
    float: left;
  }

  .record_time {
    font-size: 12px;
    color: #9b9b9b;
    line-height: 16.5px;
    margin: 0;
    width: 100%;
    padding: 0 0 15px;
  }

  .operate_btn {
    height: fit-content;
    margin: auto;
  }

  .pending_trail {
    width: 115px;
    color: #dc4630;
  }
}
</style>
